const app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                id: 1,
                name: "百年孤独",
                date: "2020-04",
                price: 85.00,
                count: 1,
            },
            {
                id: 2,
                name: "钢铁是怎样炼成的",
                date: "2020-08",
                price: 79.00,
                count: 1,
            },
            {
                id: 3,
                name: "西游记",
                date: "2019-12",
                price: 36.00,
                count: 1,
            },
            {
                id: 4,
                name: "三国演义",
                date: "2021-04",
                price: 108.00,
                count: 1,
            },
        ]
    },
    methods: {
        getFinalPrice(price) {
            return '￥' + price.toFixed(2);
        },
        increment(index, count) {
            this.books[index].count = count + 1;
        },
        decrement(index, count) {
            this.books[index].count = count - 1;
        },
        isClick(count) {
            return count <= 1;
        },
        removeBooks(index) {
            this.books.splice(index, 1)
        }
    },
    filters: {
        showPrice(price) {
            return '￥' + price.toFixed(2);
        }
    },
    computed: {
        countPrice() {
            // price = 0;

            // 三种for循环

            // for (let i = 0; i < this.books.length; i++) {
            //     price += this.books[i].price * this.books[i].count;
            // }

            // for (let i in this.books) {
            //     price += this.books[i].price * this.books[i].count;
            // }

            // for (let i of this.books) {
            //     price += i.price * i.count;
            // }

            return this.books.reduce(
                function (pre, book) {
                    return book.price * book.count
                }, 0);
        }
    }
});